{% extends "admin/base.html" %} {% block title %}添加文章{% endblock title %} {% block content %}

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item active" aria-current="page">添加文章</li>
    </ol>
</nav>


<form id="articleForm" method="post">
    <input type="hidden" name="id">
    <div class="form-row">
        <div class="form-group col-md-3">
            <label for="type">文章分类：</label>
            <select id="type" name="tid" class=" form-control" onchange="getArticleByTid()">
                {% for t in types %}
                <optgroup label="{{t.node.name}}">
                    {% for t1 in t.children %}
                    <option value="{{t1.node.id}}" {% if add_type and add_type.id==t1.node.id %}selected{%endif%}>
                        {{t1.node.name}}
                    </option>
                    {% endfor %}
                </optgroup>
                {% endfor %}
            </select>
        </div>
        <div class="form-group col-md-7">
            <label>文章标题：</label>
            <input type="text" name="title" class="form-control" id="title">
        </div>
        <div class="form-group col-md-12">
            <div class="form-check">
                <input class="form-check-input" type="radio" name="hidden" value="1" id="flexRadioDefault1" checked>
                <label class="form-check-label" for="flexRadioDefault1">隐藏教程</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="hidden" value="0" id="flexRadioDefault2">
                <label class="form-check-label" for="flexRadioDefault2">显示教程</label>
            </div>
        </div>
        <div class="form-group col-md-2">
            <label>优先级：</label>
            <input type="number" name="rank" value="0" class="form-control" id="rank">
        </div>
        <div class="form-group  col-md-4">
            <label for="type">上级文章：</label>
            <select id="pid" name="pid" class=" form-control">
                
            </select>
        </div>
        <div class="form-group  col-md-8">

            <label for="recipient-name" class="col-form-label">SEO 关键词:</label>
            <input name="keyword" type="text" class="form-control" id="recipient-name">

        </div>
        <div class="form-group col-md-12">
            <label for="message-text" class="col-form-label">SEO 描述:</label>
            <textarea name="description" class="form-control" id="message-text"></textarea>
        </div>
        <div class="form-group col-md-12">
            <label for="content">文章内容</label>
            <div style="width:100%; height:600px;" id="editor">
                <textarea id="content" name="content" style="display:none"></textarea>
            </div>
        </div>
    </div>
</form>
<div class="form-group col-md-12">
    <button onclick="submitForm('articleForm','post','/admin/article/add')" class="btn btn-primary">提交文章</button>
</div>

{% endblock content %} {% block script %}
<script src="/editor/dot2.editor.js"></script>
<script>
    var editor = new Dot2Editor("#editor", {
        upload: {
            //上传地址
            url: "/admin/article/upload",

            //自定义的文件提交的名称，后端根据这个获取文件
            name: "image",

            //自定义的键值对json，或者一个函数返回这样的json，通过post一起提交
            //配置函数的区别是，每次提交都会调用函数，如果参数值是每次都会变化的，就用函数，比如七牛上传的时候要获取token）
            //kvs: {
            //  k1: "v1",
            //  k2: "v2"
            //}
        }
    });



    function submitForm(formId, type, url) {

        var formObject = {};
        var formArray = $("#" + formId).serializeArray();
        $.each(formArray, function(i, item) {
            formObject[item.name] = item.value;
        });

        $.ajax({
            url: url,
            type: type,
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(formObject, function(key, value) {
                if (key == "rank") {
                    return parseInt(value);
                }
                if (key == "hidden") {
                    return parseInt(value) == 1 ? true : false;
                }
                return value;
            }),
            dataType: "json",
            success: function(res) {
                if (res.errno == 0) {
                    window.location.href = "/admin/types/";
                } else {
                    alert(res.msg);
                }
            },
            error: function(e) {
                alert("错误！！");
            }
        });
    }

    $(function() {
        getArticleByTid()
    });

    function getArticleByTid() {
        var tid = $("#type option:selected").val();
        if (tid == "") return;

        $.ajax({
            url: "/admin/article/by_tid?tid=" + tid,
            type: "get",
            contentType: "application/json; charset=utf-8",
            success: function(res) {
                if (res.errno != 0) {
                    alert(res.msg);
                }

                console.log(res.data)

                var html = "<option value=''>顶级文章</option>";
                for (var i = 0; i < res.data.length; i++) {
                    var v = res.data[i];
                    console.log(v)
                    html += "<option value='" + v.id + "'>" + v.title + `</option>\r\n`;
                }
                $("#pid").html(html);
            },
            error: function(e) {
                alert("错误！！");
            }
        });
    }
</script>

{% endblock script %}